import React from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'
import {actions as ProjectAction} from '../../reducers/project'
import utils from '../../common/utils'
import { get } from '../../axios'
import moment from 'moment'
import Resource from '../../components/resource'

class Introduction extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      revisions: []
    }
  }
  componentDidMount() {
    let type = utils.getQueryString('type', window.location.search),
            id = utils.getQueryString('id', window.location.search),
            project_id = utils.getQueryString('project_id', window.location.search)
    this.props.get_project_detail(id, type)
    this.get_revision_list(project_id)
  }

  get_revision_list(project_id) {
    get(`/mem/project-revision/${project_id}`).then(resp => {
      if (resp.success) {
        this.setState({revisions: resp.data})
      }
    })
  }

  render() {
		const {number, content} = this.props.project
        return(
          <div class="tabs-2">
            <h3>项目编号：{number}</h3>
            <p>
              {content}
            </p>
            <Resource resource={this.props.project.project_resource}/>
            {
              this.state.revisions.map (x => 
                <div className='revision' key={x.id}>
                  <p className='p1'>{x.content}</p>
                  <p className='p2'><i>{x.user.nickname}</i><i>{moment(x.created_at).format('ll')}</i></p>
                  <Resource resource={x.project_resource}/>
                </div>
              )
            }
            
          </div>
        )
    }
}

function mapStateToProps(state) {
  return {
    project: state.project.detail,
  }
}
  
function mapDispatchToProps(dispatch) {
  return  {
    get_project_detail: bindActionCreators(ProjectAction.get_detail, dispatch),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Introduction)